<template>
  <div class="material-releases-goods">
    <div class="content-operations">
      <div class="flex-pop">
        <div @click="closePop">取消</div>
        <div class="title">选择商品</div>
        <div class="click-release" @click="releaseClick()" style="visibility: hidden">确定</div>
      </div>
      <div class="set-label">
        <img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/common/search-icon.png" class="search">
        <input class="label-input" v-model="search" @keyup.enter="onSearch" placeholder="可根据商品名称进行搜索" />
        <img src="https://img.wifenxiao.com/h5-wfx/images/icon_close.png" class="close" @click.stop="onClear()">
      </div>
    </div>
    <div class="all-cate" v-if="allGoods.length > 0">
      <van-radio-group  v-model="goodsId" @change="onChange">
        <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
        >
          <van-radio class="cate-item" v-for="item in allGoods" :key="item.item_id" :name="item.item_id" checked-color="#F30C23">
            <div class="cate-check">
              <img :src="item.pic">
              <span class="title">{{item.title}}</span>
            </div>
          </van-radio>
        </van-list>
      </van-radio-group>
    </div>
    <div class="all-cate" v-else>
      <no-data :noData="noData"></no-data>
    </div>

  </div>
</template>
<script>
import addLabel from './addLabel'
import noData from '@/components/noData/index'
import { getItemList } from '@/api/community/materialCenter'
import Vue from 'vue'
import { RadioGroup, Radio } from 'vant'
Vue.use(Radio)
Vue.use(RadioGroup)
export default {
  components: {
    addLabel,
    noData
  },
  props: {
    item_id: {
      type: String,
      default: ''
    },
    num: {
      type: Number,
      default: 0
    },
    goodsPop: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      error: false,
      loading: true,
      finished: false,
      p: 1,
      goodsId: '',
      allGoods: [],
      label: '',
      search: '',
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_goods.png',
        text: '暂无商品',
        marginTop: '0px'
      }
    }
  },
  watch: {
    num(val) {
      console.log('this.goodsPop', this.goodsPop)
      if (this.goodsPop) {
        this.$loadingWrap.show()
        this.p = 1
        this.finished = false
        this.loading = true
        this.allGoods = []
        this.goodsLists()
        this.goodsId = this.item_id
      }
    }
  },
  created() {
    this.$loadingWrap.show()
    this.goodsLists()
  },
  methods: {
    onChange(data) {
      const res = this.allGoods.filter(item => item.item_id == data)
      clearTimeout()
      this.$emit('success', res[0])
    },
    closePop() {
      clearTimeout()
      this.$emit('success', 'close')
    },
    onLoad() {
      this.goodsLists()
    },
    onClear() {
      this.search = ''
      this.p = 1
      clearTimeout()
      this.goodsLists()
    },
    goodsLists() {
      getItemList({ title: this.search, p: this.p, size: 20 }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.list
          if (this.p == 1) {
            this.allGoods = resData
          } else {
            this.allGoods.push(...resData)
          }
          if (resData.length < 10) {
            this.finished = true
            this.loading = false
          } else {
            this.p++
            if (this.goodsPop) {
              setTimeout(() => {
                this.onLoad()
              }, 2000)
            }
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onSearch() {
      this.allGoods = []
      this.p = 1
      this.finished = false
      this.loading = true
      this.goodsLists()
    },
    releaseClick() {
      this.$emit('success', this.goodsId)
    }
  }
}
</script>
<style lang="scss">
@import "src/styles/mixin";
.material-releases-goods {
  padding: 84px 24px 24px;
  .content-operations {
    background: #f1f1f1;
    font-size: 28px;
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 10;
    height: 220px;
    .flex-pop {
      padding: 24px 24px 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 84px;
      .click-release {
        background: #FF2A40;
        color: #fff;
        padding: 16px 20px;
        border-radius: 8px;
        font-weight: 400;
      }
      .title {
        font-size: 30px;
        font-weight: 500;
      }
    }
    .set-label {
      margin: 20px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      .search {
        position: absolute;
        left: 20px;
        top: 50%;
        margin-top: -13px;
        width: 26px;
      }
      .close {
        position: absolute;
        right: 0px;
        top: 0;
        // margin-top: -13px;
        width: 80px;
        padding: 27px;
      }
      .label-input {
        background: #fff;
        width: 100%;
        height: 80px;
        line-height: 80px;
        padding: 20px 30px 20px 60px;
        font-size: 28px;
      }
    }
  }
  .all-cate {
    padding-top: 160px;
    .van-radio__icon--round .van-icon {
      position: relative;
      top: -16px;
    }
    .van-checkbox__label {
      flex: 1!important;
    }
    .van-radio__label {
      flex: 1!important;
    }
    .cate-item {
      .cate-check {
        padding: 0px 0 10px 20px;
        display: flex;
        align-items: center;
        // height: 100px;
        img {
          width: 60px;
          max-height: 60px;
          margin-right: 20px;
          border-radius: 6px;
        }
        .title {
          flex: 1;
          // height: 100px;
          // line-height: 100px;
          border-bottom: 2px solid #f1f1f1;
          @include lineClamp(24px,80px,1);
        }
      }

    }
  }

}
</style>